<template>
  <div>
    <p v-big="msg">{{msg}}</p>
    <p v-big="msg">我是局部组件:使用的时候三步,定义、注册、使用</p>
    <div class="box" v-run></div>
  </div>
</template>

<script>
//自定义指令:局部自定义指令
//注意:对于某一个组件而言,既有全局、也有局部[名字相同:先用局部，局部指令没有，再用全局的]！！！
export default {
  name: "",
  data() {
    return {
      msg: "abc",
    };
  },
  //局部指令配置项:在那个组件定义的，就在哪里使用[别的地方使用不了]
  directives: {
    //自定义指令
    //这里是定义局部指令地方,需要定义相应的函数,如果函数名字big,在template模板中使用的时候v-big->局部指令
    //第一个形参:人家给你注入真实DOM标签
    //第二个参数：人家给你注入指令相关信息-对象[指令全称、函数名字、使用VC那个属性、属性值.....]
    //第三个参数:第四个参数都是虚拟DOM，几乎不用！！！
    //中心思想:自定义指令,能获取到真实DOM节点，自定义指令，经常操作真是DOM节点！！！
    //自定义指令函数里面没有this!!!!
    big(element,option,vnode1,vnode2) {
        //将P标签文本内容,英文单词都变为大写的
        // element.innerHTML = "我爱你"
        element.innerHTML = option.value.toUpperCase();
    },

    run(element,option){
        let x = 0;
        //开启定时器
        setInterval(()=>{
            x+=Math.random()*10;
            element.style.left = x+'px';
        },100);
    }
  },
};
</script>

<style scoped>
div {
  position: relative;
  width: 400px;
  height: 200px;
  background: skyblue;
  margin: 20px auto;
}
.box{
  position:absolute;
  width: 100px;
  height: 100px;
  background: red;
  left:0px;
}
</style>
